<template>
  <a-modal
    :title="form && form.id ? '修改岗位' : '新建岗位'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @ok="handleOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-form-model-item ref="name" label="岗位名称" prop="name">
          <a-input :disabled="disabled" placeholder="请输入岗位名称" v-model="form.name"/>
        </a-form-model-item>
        <a-form-model-item ref="post_type" label="岗位类型" prop="post_type">
          <a-select :disabled="disabled" placeholder="请选择岗位类型" v-model="form.post_type">
            <template v-for="item in treeData">
              <a-select-option :value="item.id" :key="item.id">
                {{ item.tag }}
              </a-select-option>
            </template>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="code" label="岗位编码" prop="code">
          <a-input :disabled="disabled" placeholder="请输入岗位编码" v-model="form.code"/>
        </a-form-model-item>
        <a-form-model-item ref="sort" label="排序" prop="sort">
          <a-input-number class="sort" :disabled="disabled" placeholder="请输入排序" v-model="form.sort" :min="1" :max="10000"/>
        </a-form-model-item>
        <a-form-model-item ref="status" label="启用/停用" prop="status">
          <a-radio-group :disabled="disabled" v-model="form.status">
            <a-radio value="0">
              启用
            </a-radio>
            <a-radio value="1">
              停用
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { dictValue } from '@/api/common'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      treeData: [],
      form: {
        id: undefined,
        name: undefined,
        code: undefined,
        sort: 1,
        post_type: undefined,
        status: "0",
      },
      disabled: false,
      rules: {
        name: [
          { required: true, message: '请输入岗位名称', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入岗位编码', trigger: 'blur' },
        ],
        post_type: [
          { required: true, message: '请选择岗位类型', trigger: 'change' },
        ],
        status: [
          { required: true, message: '请选择岗位启用状态', trigger: 'change' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
    })
    this.$watch('visible', (e) => {
      if (e) {
        this.getMenuList()
      }
    })
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('ok', this.form)
        } else {
          return false;
        }
      });
    },
    getMenuList() {
      dictValue('sys_post_type').then(ret => {
        this.treeData = ret.data?.dict_value
      })
    },
    resetFields() {
      this.$refs.ruleForm.resetFields();
      this.form = {
        id: undefined,
        parent_id: undefined,
        name: undefined,
        code: undefined,
        sort: undefined,
        status: "0",
      };
    },
  }
}
</script>
